<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<!-- 添加表单 -->
<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 5px 5px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-block">
            <input type="hidden" name="pic"><!-- 隐藏一个输入框  获取头像上传后的文件名  用于添加操作 -->
            <input type="text" name="emsName" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工工资</label>
        <div class="layui-input-block">
            <input type="text" name="salary" placeholder="请填写员工工资"
                   autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="addPic">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属公司</label>
        <div class="layui-input-block">
            <select name="company.comId" id="company1" lay-filter="comFilter1">
                <option>--请选择--</option>
            </select>
        </div>
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block">
            <select name="department.deptId" id="department1" lay-filter="deptFilter1">
                <option>--请选择--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addFilter">立即添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 修改表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 5px 5px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-block">
            <input type="hidden" name="emsId"><!-- 隐藏一个输入框  保存回显的员工ID -->
            <input type="hidden" name="pic"><!-- 隐藏一个输入框  保存头像上传后的文件名 -->
            <input type="text" name="emsName" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工工资</label>
        <div class="layui-input-block">
            <input type="text" name="salary" placeholder="请填写员工工资"
                   autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="updatePic">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属公司</label>
        <div class="layui-input-block">
            <select name="company.comId" id="company2" lay-filter="comFilter2">
                <option>--请选择--</option>
            </select>
        </div>
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block">
            <select name="department.deptId" id="department2" lay-filter="deptFilter2">
                <option>--请选择--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFilter">立即修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--layui-container   layui的布局容器-->
    <div class="layui-container">
        <div class="layui-row"><!--layui-row   layui栅格系统中的行  每一行被分为12份（宽度）-->
            <div class="layui-col-md2"><!--layui-col-md2   一个列  md后面的2表示此列占一行12份中的2份-->
                <!--展示tree控件-->
                <div id="myTree"></div>
            </div>
            <div class="layui-col-md10"><!--layui-col-md10   md后面的8表示此列占一行12份中的10份-->
                <button class="layui-btn layui-btn-xs" id="add">添加新员工</button>
                <!--搜索框-->
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="emsName" id="search" placeholder="请填写员工姓名"/>
                    </div>
                </div>
                <button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
                <!-- 批量删除   头部删除选中工具栏 -->
                <script type="text/html" id="toolbarDemo">
                    <button class="layui-btn layui-btn-sm" id="deleteSelected" lay-event="deleteSelected">删除选中</button>
                </script>
                <!--展示表格-->
                <table id="myTable" lay-filter="tableFilter"></table>
                <!--表格显示图片-->
                <script type="text/html" id="img">
                    <img src="{{d.pic}}" height="20" width="30"/>
                </script>
                <!--toolbar工具栏-->
                <script type="text/html" id="bar">
                    <a class="layui-btn layui-btn-danger" lay-event="del">删除</a>
                    <a class="layui-btn layui-btn-xs" lay-event="upd">修改</a>
                </script>
            </div>
        </div>
    </div>
    <!--js代码-->
    <script>
        layui.use(['element','tree','table','layer','upload','form'],function () {
            var element = layui.element;
            var tree = layui.tree;
            var table = layui.table;
            var layer = layui.layer;
            var upload = layui.upload;
            var form = layui.form;
            var $ = layui.$;
            //1、渲染table表格
            var tableIns = table.render({
                elem:'#myTable',
                url:'employee/select',
                toolbar: '#toolbarDemo', //开启头部删除选中的工具栏，并为其绑定左侧模板
                height:312,
                page:true,
                limit:4,
                limits:[4,5,6],
                cols:[[
                    {type: 'checkbox', fixed: 'left'},  //选择框
                    {field:'emsId',title:'员工编号',sort:true,width:80},
                    {field:'emsName',title:'员工姓名',sort:true,width:80},
                    {field:'salary',title:'员工工资',sort:true,width:80},
                    {field:'pic',title:'学生头像',templet:'#img'},
                    {title:'所属部门',templet:function (e) {
                            return e.department.deptName
                        }},
                    {title:'所属公司',templet:function (e) {
                            return e.company.comName
                        }},
                    {fixed: 'right',title:'操作', toolbar: '#bar'}
                ]]
            })
            //2、加载tree控件
            $.ajax({
                url:'tree/selectAll',
                success:function (result) {
                    //将查询到的数据渲染到tree中
                    tree.render({
                        elem:'#myTree',
                        data:result,
                        click:function (obj) {//给tree控件中的节点
                            if(obj.data.children!=null){//说明是一级节点  即点击的是公司
                                tableIns.reload({
                                    where:{
                                        comId:obj.data.id
                                    },page: {
                                        curr:1
                                    }
                                })
                            }else{//说明是二级节点  即点击的是部门
                                tableIns.reload({
                                    where:{
                                        deptId:obj.data.id
                                    },page: {
                                        curr:1
                                    }
                                })
                            }
                        }
                    })
                }
            })
            //3、按员工姓名搜索
            $('#searchBtn').click(function () {
                tableIns.reload({
                    where:{
                        emsName:$('#search').val()
                    },page: {
                        curr:1
                    }
                })
            })
            //4、添加操作
            //首先、点击添加新员工按钮时  触发点击事件  弹出添加页面
            $('#add').click(function () {
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
            })
            //第二，加载文件上传upload组件
            upload.render({
                elem:'#addPic',
                url:'employee/upload',
                done:function (result) {//将文件上传方法的返回值  即上传后的文件名回显给添加表单中隐藏的头像pic输入框中
                    form.val('addFormFilter',{
                        pic:result.fileName
                    })
                }
            })
            //第三，将当前页面的两个所属公司的一级下拉框内容给加载出来
            $.ajax({
                url:'company/select',
                success:function (result) {
                    var s = "";//遍历返回的集合  字符串拼接所有的下拉框内容
                    $(result).each(function (i,obj) {
                        s += '<option value="'+obj.comId+'">'+obj.comName+'</option>';
                        //将下拉框的内容option标签  一一放到select标签中
                        $('#company1').html(s);
                        //因为下拉框的内容是动态获取的  所有要刷新下拉框内容
                        form.render('select');
                    })
                }
            })
            //第四，根据所属公司的一级下拉框的值改变事件  加载其对应的二级下拉框所属部门
            form.on('select(comFilter1)',function () {
                var id = $('#company1').val()
                $.ajax({
                    url:'department/select',
                    data:'comId='+id,
                    success:function (result) {
                        var s = "";//遍历返回的集合  字符串拼接所有的下拉框内容
                        $(result).each(function (i,obj) {
                            s += '<option value="'+obj.deptId+'">'+obj.deptName+'</option>';
                            //将下拉框的内容option标签  一一放到select标签中
                            $('#department1').html(s);
                            //因为下拉框的内容是动态获取的  所有要刷新下拉框内容
                            form.render('select');
                        })
                    }
                })
            })
            //最后，头像文件回显后  二级联动下拉框实现后  才对添加表单开始提交
            form.on('submit(addFilter)',function () {
                $.ajax({
                    url:'employee/add',
                    data:$('#addForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            $('#addForm')[0].reset();
                            tableIns.reload()
                        }else{
                            layer.msg('添加失败')
                        }
                    }
                })
                return false;//阻止表单自动提交
            })
            //5、批量删除   头部工具栏中删除选中按钮的点击事件
            $('#deleteSelected').click(function () {
                //首先，获取所有选中的数据对象（很多行数据组成的数组对象）
                var checkstatus = table.checkStatus('myTable');
                //然后，判断选中的数据数组的长度   为0的话提示至少要选择一个删除项
                if(checkstatus.data.length==0){
                    layer.msg('请至少选择一个要删除的条目！');
                    return; //resturn不要忘了  此时要结束这段程序
                }
                //确定有选择要删除的后，定义一个变量接收一个数组  保存选中的每一行的id
                var ids = [];
                //遍历选中的数组  一一获取到id 并保存到上面的那个数组变量中
                for(var i=0;i<checkstatus.data.length;i++){
                    ids.push(checkstatus.data[i].emsId);
                }
                //最后，发送ajax请求  执行批量删除操作
                $.ajax({
                    url:'employee/removeAny',
                    data:'emsIds='+ids,
                    success:function (result) {
                        if(result.flag){
                            layer.msg('批量删除成功');
                            tableIns.reload()
                        }else{
                            layer.msg('批量删除失败')
                        }
                    }
                })
            })
            //6、//监听 行工具事件  执行删除或修改操作
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='del'){
                    //发送ajax请求  执行删除方法
                    $.ajax({
                        url:'employee/remove',
                        data:'emsId='+obj.data.emsId,
                        success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                tableIns.reload()
                            }else{
                                layer.msg('删除失败')
                            }
                        }
                    })
                }else if(obj.event=='upd'){
                    //首先，弹出修改页面
                    layer.open({
                        type:1,
                        title:'修改页面',
                        area:'500px',
                        content:$('#updateForm')
                    })

                    //第三，加载头像文件上传组件
                    upload.render({
                        elem:'#updatePic',
                        url:'employee/upload',
                        done:function (result) {
                            form.val('updateFormFilter',{
                                pic:result.fileName
                            })
                        }
                    })
                    //注意：回显下拉框内容之前  要先把下拉框内容给加载出来
                    //第四、加载所有的所属公司下拉框内容 和所属部门下拉框内容
                    $.ajax({
                        url:'company/select',
                        success:function (result) {
                            var s = '';
                            $(result).each(function (i,obj2) {
                                s += '<option value="'+obj2.comId+'">'+obj2.comName+'</option>';
                                $('#company2').html(s);
                                //因为下拉框的内容是动态获取的  所有要刷新下拉框内容
                                form.render('select');
                            })
                        }
                    })
                    $.ajax({
                        url:'department/select',//这时加载所有的部门  不传参数comId
                        success:function (result) {
                            var s = '';
                            $(result).each(function (i,obj2) {
                                s += '<option value="'+obj2.deptId+'">'+obj2.deptName+'</option>';
                                $('#department2').html(s);
                                //因为下拉框的内容是动态获取的  所有要刷新下拉框内容
                                form.render('select');
                            })
                        }
                    })
                    //第五、当修改页面的中所属公司下拉框的值改变时  触发加载其对应的所属部门下拉框内容
                    form.on('select(comFilter2)',function () {
                        var id = $('#company2').val();//获取选中的一级下拉框内的value值
                        console.log('id='+id)
                        $.ajax({
                            url:'department/select',
                            data:'comId='+id,
                            success:function (result) {
                                var s = '';
                                $(result).each(function (i,obj2) {
                                    s += '<option value="'+obj2.deptId+'">'+obj2.deptName+'</option>'
                                    $('#department2').html(s);
                                    form.render('select')
                                })
                            }
                        })
                    })
                    //然后，回显修改页面内容
                    $.ajax({
                        url:'employee/getOne',
                        data:'emsId='+obj.data.emsId,
                        success:function (result) {
                            form.val('updateFormFilter',{
                                emsId:result.emsId,
                                emsName:result.emsName,
                                salary:result.salary,
                                pic:result.pic,
                                // deptId:result.department.deptId,
                                // comId:result.company.comId
                                'department.deptId':result.department.deptId,
                                'company.comId':result.company.comId
                            })
                        }
                    })
                    //最后、提交修改页面内容
                    form.on('submit(updateFilter)',function () {
                        $.ajax({
                            url:'employee/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    tableIns.reload()
                                }else{
                                    layer.msg('修改失败')
                                }
                            }
                        })
                        return false;
                    })
                }
            })
        })
    </script>
</body>
</html>